<template>
	<view class="project_jd">
		<view class="head">
			<Wzg_simple_head 
				bg_color="#fff"
				color="black"
				text="项目进度">
			</Wzg_simple_head>
			<view class="head_bottom">
				<view class="head_bottom_content">
					<view class="head_bottom_content_top">
						罗江乡村振兴-白马关旅游扶贫建设项目
					</view>
					<view class="head_bottom_content_bottom">
						<view class="head_bottom_content_bottom_item">
							当前进度 2/6
						</view>
						<view class="head_bottom_content_bottom_item">
							<u-icon name="calendar" size="28"
								:custom-style="{
									marginRight:'5px',
								}">
							</u-icon>
							项目信息
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content_top">
				<view style="height: 15px;"></view>
				<Project_jd_tabs_cp
					@change = "current = $event">
				</Project_jd_tabs_cp>
			</view>
			<view class="content_bottom">
				<scroll-view
					:style="{
						boxSizing: 'border-box',
						width:'100vw',
						paddingTop:'5px',
						height:system_info.system_info.windowHeight - system_info.head.height - 165+'px',
					}"
					scroll-y="true">
					<keep-alive>
						<Qqgz_cp v-if="current == 0"></Qqgz_cp>
						<!-- <Project_jd_lc v-if="current == 0"></Project_jd_lc> -->
						<Ssjd_cp v-else-if="current == 1"></Ssjd_cp>	
					</keep-alive>
					<!--  -->
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script> 
	import {_get_system_info} from "@/my_tools/tools.js"
	import Wzg_simple_head from "@/components/my_components/public_cp/wzg_simple_head.vue" 
	import Page_return from "@/components/my_components/my_bt/page_return.vue"
	import Project_jd_tabs_cp from "@/components/my_components/project_jd_cp/project_jd_tabs_cp.vue"
	import Qqgz_cp from "@/components/my_components/project_jd_cp/qqgz_cp.vue"
	import Ssjd_cp from "@/components/my_components/project_jd_cp/ssjd_cp.vue"
	export default {  //项目进度页面
		components:{Page_return,Wzg_simple_head,Qqgz_cp,Project_jd_tabs_cp,Ssjd_cp},
		data() {
			return {
				system_info:null,
				current:0,
				form: {
					name: '',
					intro: '',
					sex: ''
				},
				list: [
					{
						name: '已完成',
						disabled: false
					},
					{
						name: '未完成',
						disabled: false
					},
				],
				list1: [
					{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},
				],
			};
		},
		methods:{
			
		},
		created(){
			this.system_info = _get_system_info(uni);
		},
	}
</script>

<style lang="scss" scoped>
.project_jd{
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	align-items: flex-start;
	.head{
		width: 100vw;
		// background-image: url("https://blog.mrabit.com/bing/today");
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: center 0;
		height:fit-content;
		>div{
			width: 100vw;
		}
		.head_bottom{
			height:90px;
			padding: 0 15px;
			box-sizing: border-box;
			.head_bottom_content{
				padding: 10px;
				width: 100%;
				height: 100%;
				border-radius: 10px;
				background-color: #FFFFFF;
				@include flex_layout_column;
				justify-content: space-between;
				position: relative;
				transform: translate(0,15px);
				box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
				.head_bottom_content_top{
					font-size: 20px;
					color: #000000;
				}
				.head_bottom_content_bottom{
					@include flex_layout_row;
					justify-content: space-between;
					font-size: 13px;
					color: #424242;
				}
			}
		}
	}
	.content{
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.content_top{
			width: 100%;
			height:fit-content;
			background-color: #ffffff;
		}
		.content_bottom{

		}
	}
}
</style>
